<template>
  <div class="_box padding-t-20 padding-l-20" :style="`height:${height}px`">
    <a-tree
      v-if="treeData.length"
      :tree-data="treeData"
      defaultExpandAll
      :replaceFields="{children:'children',title:'name',key:'deptId'}"
      @select="onSelect"
    ></a-tree>
  </div>
</template>
<script>
import {tree} from '@/services/tenant'

export default {
  name: "deptTree",
  components: {},
  data() {
    return {
      id:0,
      treeData:[],
      height: window.innerHeight - 50,
      deptId:0,
      tempKeys:0
    };
  },
  computed: {},
  created() {
    this.id = this.$route.query.id;
    this.getTree(this.id);
  },
  mounted () {
  },
  methods: {
    getTree(id){
      tree({id:id}).then(({data}) => {
        if(data.code == 0){
          this.treeData = [
            {
              sort:0,
              parentId:-1,
              name:'全部',
              deptId:null,
              children:[]
            }
          ]
          this.treeData[0]['children'].push(data.data[0]);
          this.deptId = this.treeData[0].deptId;
          this.$emit('getDeptDev',{id:this.id,deptId:this.deptId});
          this.$emit('treeData',this.treeData[0]['children']);
        }
      })
    },
    onSelect(selectedKeys) {
      console.log(selectedKeys);
      // if(selectedKeys[0]){
      //   this.tempKeys = selectedKeys[0];
      // }
      this.deptId = selectedKeys[0] ? selectedKeys[0]:null;
      if(selectedKeys[0] == '0-0'){
        this.deptId = null
      }
      this.$emit('getDeptDev',{id:this.id,deptId:this.deptId});
    },
  },
};
</script>

<style lang="less" scoped>
._box{
  width: 200px;
  overflow-y: auto;
  background-color: #fff;
}
/deep/ .ant-tree li ul{
  padding: 0 ;
}
/deep/ .ant-tree li .ant-tree-node-content-wrapper{
  height: 32px;
  line-height: 32px;
}
/deep/ .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle{
  line-height: 32px;
}
</style>
